<template>
  <div class="container-y">
    <div class="container-y">
      <div class="d-item-wrap">
        <div class="d-title">
          关键信息基础设施
        </div>
        <div class="d-content">

          <div class="item">
            <div class="label">
              ip
              <span class="plus-txt-wrap" @click="_addData(1)">
              添加
            </span>
            </div>
            <div class="txt txt-checked-item-wrap">
              <div class="txt-checked-item"
                   v-for="(item,index) in effectData.effectIp"
                   :key="index"
                   @click="_deleteAdd(1,index)">
                {{item}}
              </div>
            </div>
          </div>

          <div class="item">
            <div class="label">
              域名
              <span class="plus-txt-wrap" @click="_addData(2)">
              添加
            </span>
            </div>
            <div class="txt txt-checked-item-wrap">
              <div class="txt-checked-item"
                   v-for="(item,index) in effectData.effectDomainName"
                   :key="index"
                   @click="_deleteAdd(2,index)">
                {{item}}
              </div>
            </div>
          </div>

          <div class="item">
            <div class="label">
              url
              <span class="plus-txt-wrap" @click="_addData(3)">
              添加
            </span>
            </div>
            <div class="txt txt-checked-item-wrap">
              <div class="txt-checked-item"
                   v-for="(item,index) in effectData.effectUrl"
                   :key="index"
                   @click="_deleteAdd(3,index)">
                {{item}}
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="d-item-wrap">
        <div class="d-title"></div>
        <div class="d-content">
          <div class="item" v-if="isPush === 2">
            <div class="label">
              地域
            </div>
            <div class="txt txt-chose wordHidden-2" @click="_addRegion(1)">
              {{$store.state.regionDataChecked.text}}
            </div>
          </div>
          <div class="item" v-if="isPush === 2">
            <div class="label">
              行业
            </div>
            <div class="txt txt-chose wordHidden-2" @click="_addRegion(2)">
              {{$store.state.industryDataChecked.text}}
            </div>
          </div>
          <div class="item">
            <div class="label">
              影响和危害描述
            </div>
            <div class="txt">
              <textarea class="txt-area" placeholder="点击输入文字" id="effectDesc"></textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="pdb"></div>
    </div>
    <transition name="slideRight">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>

  import templateItems from "../commonComponents/templateItems.vue"

  const effectDataKeys = ["effectIp", "effectDomainName", "effectUrl"];

  const headerFlag = 14;

  export default {
    data() {
      return {
        effectData: {
          effectIp: [],
          effectDomainName: [],
          effectUrl: [],
        },
        isPush:2,
      }
    },
    methods: {
      init() {
        this.lastFlag = this.$store.state.headerRightType;
        _methods.headerRightShow({
          txt: "确定",
          val: headerFlag,
        });
        _data.regionDataChecked = [];
        _data.industryDataChecked = [];
        _methods.headerTitleChange(headerFlag);
        this.draftGet();
        this.isPush = _data.infoAddDetail.isPush;
      },
      _addData(i) {
        let title = ["", "ip", "域名", "url"][i];
        let ph = ["", "ip示例: 192.168.1.1", "域名示例: a.gov.com", "url示例: http://www.baidu.com/"][i];

        let ajKey = {
          effectIp: "",
          effectDomainName: "",
          effectUrl: "",
        };

        let self = this;

        // let fn = (call) => {
        //   if (_showControl['318002']){
        //   //   _methods.getInfoSubject(ajKey).then(() => {
        //   //     call();
        //   //   }, () => {
        //   //     mui.toast("无匹配数据")
        //   //   });
        //   // }else {
        //   //   call();
        //     call();
        //   }
        // };

        mui.prompt(`添加${title}`, ph, ``, ['取消', '确认'], (e) => {
          if (e.index == 1) {
            let vu = e.value;

            switch (i) {
              case 1:

                let flag1 = _filterData.isIp(vu);

                if (flag1) {
                  ajKey.effectIp = vu;
                  self.effectData.effectIp.push(vu);
                }

                break;
              case 2:

                let flag2 = _filterData.isYm(vu);

                if (flag2) {
                  ajKey.effectDomainName = vu;
                  self.effectData.effectDomainName.push(vu);
                }

                break;
              case 3:

                vu = _filterData.isHttp(vu);

                let flag3 = _filterData.isUrl(vu);

                if (flag3) {
                  ajKey.effectUrl = vu;
                  self.effectData.effectUrl.push(vu);
                }

                break;
            }
          }
        });
      },
      _addRegion(i) {
        _methods.goPath(`/infoSubmitList/infoSubmit/regionChose?type=${i}`);
      },
      _deleteAdd(flag, index) {
        switch (flag) {
          case 1:
            this.effectData.effectIp.splice(index, 1);
            break;
          case 2:
            this.effectData.effectDomainName.splice(index, 1);
            break;
          case 3:
            this.effectData.effectUrl.splice(index, 1);
            break;
        }
      },
      _effectDataGet() {

        let data = {};

        effectDataKeys.forEach((i) => {
          let v = this.effectData[i];
          if (v.length) {
            data[i] = v.join(",");
          }
        });

        let v2 = this.$store.state.regionDataChecked.id;
        let v3 = this.$store.state.industryDataChecked.id;

        if (v2.length) {
          data.regionIds = v2.join(",");
        }

        if (v3.length) {
          data.industryIds = v3.join(",");
        }

        data.effectDesc = document.getElementById("effectDesc").value;

        _data.effectDataGet = data;

      },
      //获取草稿箱内容
      draftGet() {
        if (_data.isDraftFLag) {

          _data.effectDataGet = {
            effectIp: [],
            effectDomainName: [],
            effectUrl: [],
          };

          for (let key in _data.draftDetail) {

            if (_data.effectDataGet[key] && _data.draftDetail[key]) {

              let val = _data.draftDetail[key].split(",");

              _data.effectDataGet[key] = val;

            }

          }

          document.getElementById("effectDesc").value = _data.draftDetail.effectDesc ? _data.draftDetail.effectDesc : "";

          this.effectData = _data.effectDataGet;

          _data.isRegionStore = {
            ic: [],
            rc: [],
          };

          //地域
          if (_data.draftDetail.industryName) {
            let industry = [];
            let industryIds = _data.draftDetail.industryIds.split(",");
            let txt = _data.draftDetail.industryName;

            _data.draftDetail.industryName.split(",").forEach((v, index) => {
              industry.push({text: v, id: industryIds[index]});
            });

            this.$store.commit("_industryDataChecked", {
              id: _data.draftDetail.industryIds,
              text: txt
            });

            _data.isRegionStore.ic = industry;

          }

          //地域
          if (_data.draftDetail.regionName) {
            let arr = [];
            let Ids = _data.draftDetail.regionIds.split(",");
            let txt = _data.draftDetail.regionName;

            _data.draftDetail.regionName.split(",").forEach((v, index) => {
              arr.push({text: v, id: Ids[index]});
            });

            this.$store.commit("_regionDataChecked", {
              id: _data.draftDetail.regionIds,
              text: txt
            });

            _data.isRegionStore.rc = arr;

          }

          _data.isRegionDraft = true;

          _data.isDraftFLag = false;
        }
      },
    },
    mounted() {
      this.init();
      _data.busInit.on_(() => {
        this._effectDataGet();
        _methods.goBack();
      });
    },
    components: {
      templateItems
    },
    beforeDestroy() {
      _data.busInit.off_();
      let t = 10 + parseInt(_methods.getUrlParam("type"));
      _methods.headerTitleChange(t, true);
      _methods.headerRightShow(this.lastFlag);
    }
  }

</script>

